<template>
  <div id="setUp" style="margin: 10px">
    <div class="form">
      <div style="margin-bottom: 20px">
        <el-button v-if="edit" type="primary" @click="onSubmit">提交</el-button>
        <el-button v-else type="primary" @click="edit = true">编辑</el-button>
        <el-button v-if="edit" @click="edit = false">取消</el-button>
      </div>
      <el-form
        v-if="edit"
        ref="form"
        label-position="left"
        :model="form"
        label-width="120px"
      >
        <el-form-item label="网站名称：">
          <el-input v-model="form.webName" />
        </el-form-item>
        <el-form-item label="网站备案号：">
          <el-input v-model="form.recordNumber" />
        </el-form-item>
        <el-form-item label="首页文案：">
          <el-input v-model="form.copywriting" rows="4" type="textarea" />
        </el-form-item>
        <el-form-item label="logo：">
          <el-upload
            class="avatar-uploader"
            action
            :show-file-list="false"
            style="width: 100%"
            :http-request="upload_logo"
          >
            <img v-if="form.logo" :src="imgHost + form.logo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" style="" />
          </el-upload>
        </el-form-item>
        <el-form-item label="首页图片：">
          <el-upload
            class="avatar-uploader"
            action
            :show-file-list="false"
            style="width: 100%"
            :http-request="uploadImage"
          >
            <img v-if="form.indexImg" :src="imgHost + form.indexImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" style="" />
          </el-upload>
        </el-form-item>
      </el-form>
      <el-form
        v-else
        class="display"
        label-position="left"
        :model="form"
        label-width="120px"
      >
        <el-form-item label="网站名称：">
          <!-- <el-input v-model="form.webName" /> -->
          <p>{{ form.webName }}</p>
        </el-form-item>
        <el-form-item label="网站备案号：">
          <!-- <el-input v-model="form.recordNumber" /> -->
          <p>{{ form.recordNumber }}</p>
        </el-form-item>
        <el-form-item label="首页文案：">
          <!-- <el-input v-model="form.copywriting" rows="4" type="textarea" /> -->
          <p>{{ form.copywriting }}</p>
        </el-form-item>
        <el-form-item label="logo：">
          <img v-if="form.logo" :src="imgHost + form.logo" class="avatar">
        </el-form-item>
        <el-form-item label="首页图片：">
          <img v-if="form.indexImg" :src="imgHost + form.indexImg" class="avatar">
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { upload } from '@/fs'
export default {
  data() {
    return {
      form: {
        indexImg: '',
        logo: ''
      },
      edit: false
    }
  },
  created() {
    this.qeury()
  },
  methods: {
    qeury() {
      this.$http.get('setUp/getSetUp').then((res) => {
        this.form = res.data
      })
    },
    onSubmit() {
      this.$http.post('setUp/updateSetUp', this.form).then((res) => {
        if (res.data.code) {
          this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
        }
        this.qeury()
        this.edit = false
      })
    },
    uploadImage({ file }) {
      upload(file).then((res) => {
        // this.form.indexImg = res.code
        this.$set(this.form, 'indexImg', res.code)
      })
    },
    upload_logo({ file }) {
      upload(file).then((res) => {
        // this.form.logo = res.code
        this.$set(this.form, 'logo', res.code)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.app-main {
  overflow: auto;
}
#setUp {
  .form {
    width: 50%;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin: 0 auto;
    li {
      display: flex;
      padding: 20px 0;
      div {
        flex: 1;
      }
    }
    /deep/ .el-upload {
      width: 30%;
      text-align: left;
      img {
        width: 100%;
        border: 1px solid #3c3c3c;
      }
    }
  }
  .display {
    .el-form-item {
     border-bottom: 1px solid #3c3c3c;
    }
    img {
      width: 30%;
      border: 1px solid #3c3c3c;
    }
  }
}
</style>
